<!--宠物闹钟-->
<template>
    <div id="petLoclk">
        <div class="headCheck">
            <van-cell title="选择萌宠" is-link :value="petName" arrow-direction="down"  @click="openMenu"/>
        </div>
        <div :style="`height:${contentHeight}`" class="content" >
            <div class="list" v-for="(data,index) in dataList" :key="index">
            <van-swipe-cell right-width="80">
                <van-cell-group>
                    <van-cell :title="data.type+'\t\t\t\t\t'+data.date" :value="data.content"/>
                </van-cell-group>
                   <van-button icon="delete" type="info" slot="right" color="red" @click="delthis(data.id)">删除</van-button>
            </van-swipe-cell>
            </div>
            <div class="button">
                <van-button plain type="primary" size="large" @click="openAddPan">添加闹钟</van-button>
            </div>
        </div>
        <van-action-sheet
            v-model="show"
            :actions="actions"
            @select="onSelect"
            cancel-text="取消"
        />

        <van-dialog
            use-slot
            title="添加闹钟"
            v-model="addIsShow"
            show-cancel-button
            @confirm="confirm"
            >
           <div class="addLock">
               <van-cell-group>
                    <van-field
                        v-model="petName"
                        label="宠物昵称："
                        left-icon="contact"
                        disabled
                        border="false"
                    />
                     <van-field
                        v-model="content"
                        label="描述："
                        left-icon="comment-o"
                        border="false"
                    />
                     <van-field
                        v-model="currentDate"
                        label="提醒时间："
                        left-icon="todo-list-o"
                        border="false"
                        disabled
                        @click="openDatePanel"
                    />
                     <van-field
                        v-model="type"
                        label="自定义周期："
                        left-icon="todo-list-o"
                        border="false"
                        v-if="isWrite"
                    />
                </van-cell-group>
                <van-radio-group :value="checkType" bind:change="onChange">
                    <div class="typeList">
                    <van-radio name="1" @click="checkThis('1')">每天</van-radio>
                    <van-radio name="2" @click="checkThis('2')">每周</van-radio>
                    <van-radio name="3" @click="checkThis('3')">每五天</van-radio>
                    <van-radio name="4" @click="checkThis('4')">
                        自定义周期
                    </van-radio>
                    </div>
                </van-radio-group>
           </div>
         </van-dialog>

         <!--日期选择框-->

         <van-action-sheet v-model="isShowDatePanel" title="提醒时间">
           <van-datetime-picker
            type="time"
            :value="checkDate"
            bind:input="onInput"
            @confirm="confirmDate"
            />
         </van-action-sheet>
    </div>
</template>
<script>
import {getAllByUserLock} from '../../../request/mobile/mine/request_mine'

export default {
    data(){
        return{
            contentHeight:'',
            dataList:[
                {
                    date:'2019-03-04',
                    content:'喂食',
                    type:'每天',
                    id:1
                },
                 {
                    date:'2019-03-05',
                    content:'拉屎',
                    type:'每天',
                    id:2
                }
            ],
            show:false,
            actions:[{name:'核桃'},{name:'大黑'}],
            petName:'核桃',
            addIsShow:false,
            checkType:"1",
            isWrite:false,
            isShowDatePanel:false,
            currentDate:'',
            type:'',
        }
    },
    methods:{
        getContentHeight(){
            this.contentHeight = window.innerHeight-44-50-51+"px"
        },
        openMenu(){
            this.show=!this.show
        },
        onSelect(event){
            this.petName=event.name
            this.show=false
        },
        openAddPan(){
            this.addIsShow=true
        },
        delthis(id){
           var dataList = this.dataList;
           for(var i=0;i<dataList.length;i++){
               if(dataList[i].id==id){
                   dataList.splice(i,1);
               }
           }
        },
        confirm(){
            this.addIsShow=close;
            this.dataList.push({
                date:this.currentDate,
                content:this.content,
                type:this.checkType,
                id:new Date().getMilliseconds()
            })

        },
        checkThis(id){
           this.checkType = id;
           this.isWrite=false

           if(id==4){
               this.isWrite=true
           }
        },
        openDatePanel(){
            this.isShowDatePanel=!this.$isShowDatePanel
        },
        confirmDate(value){
            this.currentDate=value
            this.isShowDatePanel=false;
        },
        getAllByUserLock(){
            var userId = localStorage.getItem("userId");
            getAllByUserLock(userId).then(res=>{
                if(res.code==200){
                     var datas = res.data;
                     if(datas.length==0){
                         this.$Toast("还没有添加闹钟，赶紧添加吧")
                         return;
                     }
                     
                }
            })
        }
        
    },
    created(){
        this.getContentHeight()
    }
}
</script>
<style scoped>
    .content{
        background: #efefef;
        overflow-y: scroll;
    }
    .list{
        margin-top: .6rem;
    }
    .button{
        position:fixed;
        bottom: 51px;
        z-index: 999;
        width: 100%;
    }
    .addLock{
        height: 150px;
        width: 100%;
        overflow:scroll;
    }
    .typeList{
            display: flex;
            margin-top: .3rem;
            padding: .6rem;
            justify-content: space-evenly;
    }
</style>